<template>
  <div class="classify-content" @click="handleToControl">
    <div class="section-group">
      <secondTopTem v-if="styleType == 3" :propsData="propsData" :catList="catList"></secondTopTem>
      <secondPicTem v-if="isSecondPicTem" :propsData="propsData" :catList="catList"></secondPicTem>
      <firstPicTem v-if="styleType == 9" :propsData="propsData" :catList="catList"></firstPicTem>
      <commonClassifyTem
        v-if="styleType == 6"
        :propsData="propsData"
        :catList="catList"
      ></commonClassifyTem>
      <leftAsideTem v-if="isLeftSideTem" :propsData="propsData" :catList="catList"></leftAsideTem>
      <leftWithMenu v-if="isLeftWithMenu" :propsData="propsData" :catList="catList"></leftWithMenu>
      <oneLevelTopNav
        v-if="styleType == 8"
        :propsData="propsData"
        :catList="catList"
      ></oneLevelTopNav>
    </div>
  </div>
</template>

<script>
// diy接口
import { getCatList } from "@/api/diy/diy";
import { getUrlParam } from "@/utils/utils.js";
import leftAsideTem from "./templates/leftAsideTem.vue";
import secondTopTem from "./templates/secondTopTem.vue";
import secondPicTem from "./templates/secondPicTem.vue";
import firstPicTem from "./templates/firstPicTem.vue";
import commonClassifyTem from "./templates/commonClassifyTem.vue";
import leftWithMenu from "./templates/leftWithMenu.vue";
import oneLevelTopNav from "./templates/oneLevelTopNav.vue.vue";

export default {
  name: "classifyContent",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
  },
  mixins: [],
  components: {
    leftAsideTem,
    secondTopTem,
    secondPicTem,
    firstPicTem,
    commonClassifyTem,
    leftWithMenu,
    oneLevelTopNav,
  },
  data() {
    return {
      store_id: "1",
      catList:[{
        name:'精选超市',
        pic_url:'',
        goods_list:[],
        children:[{
          name:'常用分类',
          pic_url:'',
          goods_list:[],
          children:[{
            name:'平板电脑',
            pic_url:'',
            goods_list:[]
          }]
        }]
      },{
        name:'家电',
        pic_url:'',
        goods_list:[],
        children:[{
          name:'常用分类',
          pic_url:'',
          goods_list:[],
          children:[{
            name:'平板电脑',
            pic_url:'',
            goods_list:[]
          }]
        }]
      },{
        name:'手机',
        pic_url:'',
        goods_list:[],
        children:[{
          name:'常用分类',
          pic_url:'',
          goods_list:[],
          children:[{
            name:'平板电脑',
            pic_url:'',
            goods_list:[]
          }]
        }]
      },{
        name:'美妆护肤',
        pic_url:'',
        goods_list:[],
        children:[{
          name:'常用分类',
          pic_url:'',
          goods_list:[],
          children:[{
            name:'平板电脑',
            pic_url:'',
            goods_list:[]
          }]
        }]
      }]
    };
  },
  mounted() {
    if (getUrlParam("store_id")) this.store_id = getUrlParam("store_id");
    this.getCatList();
  },
  watch: {},
  computed: {
    styleType() {
      return this.propsData.params.styleType || "1";
    },
    adConfig() {
      return this.propsData.params.abConfig || {};
    },
    levelNum() {
      return this.propsData.params.levelNum || "1";
    },
    isLeftSideTem() {
      let arr = [1, 7];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
    isLeftWithMenu() {
      let arr = [2];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
    isSecondPicTem() {
      let arr = [4, 5];
      let styleType = Number(this.styleType);
      return arr.includes(styleType);
    },
  },
  methods: {
    // 点击编辑
    handleToControl() {
      let data = Object.assign({}, this.propsData);
      data.controlComName = "classifyContentControl";
      this.$emit("chooseMoudle", data);
    },
    // 获取分类数据
    getCatList() {
      getCatList({
        url: "/goods/cat-list",
        data: { store_id: this.store_id },
      }).then((res) => {
        if(res.code == 0) {
          console.log(res.data.list,"fenlei");
          if(res.data.list && res.data.list.length > 0) {
            this.catList = res.data.list
          }else{
            return
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.classify-content {
  width: 100%;
  height: 575px;
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  .section-group {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    .left-aside {
      width: 101px;
      background: #f2f2f2;
      height: 100%;
    }
    .section-content {
      flex: 1;
      position: relative;
      height: 100%;

      .bg {
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.4;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 111;
      }
    }
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }
}
.classify-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
